*{
    margin: 0;
    padding: 0;
}
body{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background: url(../Sass-音乐播放器素材/images/bg.jpg) repeat;
    background-size: 100% 100%;
}
/* 播放器 */
.player{
    width: 900px;
    height: 600px;
    background: rgb(30, 172, 218);
    display: flex;
    flex-direction: column;
    border-radius: 6px;
    /* 播放器头部 */
    .player-nav{
        height: 57px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-left: 30px;
        padding-right: 20px;       
        p{
           color: white;
           font-size: 20px;
        }
        /* 搜索框 */
        .search{
            width: 300px;
            height: 30px;
            border-radius: 20px;
            background: rgb(131, 209, 235);
            padding-left: 25px;
            padding-right: 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            input{
                border: none;
                width: 300px;
                height: 20px;
                background: rgb(131, 209, 235);
                outline: none;
            }
        }
    }
    /* 播放器中间内容的容器 */
    .player-container{
        height: 493px;
        background: rgb(232, 205, 172);
        display: flex;
        justify-content: space-between;
        overflow: hidden;

        /* 左右整体样式 */
        .container-left,.container-right{
            width: 200px;
            height: 473px;
            padding: 10px;
            overflow: auto;
            // display: flex;
            // flex-direction: column;

            &::-webkit-scrollbar{
                display: none;
            }
        }
        /* 左边内容区域样式 */
.container-left{
    p{
        height: 40px;
        padding: 0 10px 0 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        span{
            font-size: 14px;
            width: 140px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .img{
            background: url(../Sass-音乐播放器素材/images/table.png) no-repeat -30px -48px;
            width: 23px;
            height: 17px;
        }
    }
    .active{
        background: rgb(233, 214, 194);
        color: red;
    }
}
/* 右边内容样式 */
.container-right{
    display: flex;
    flex-direction: column;
    h4{
        margin-bottom: 10px;
        display: inline-block;
    }
    .message{
        width: 190px;
        height: auto;    
        display: flex;
        align-items: flex-start;    
        justify-content: space-between;
        img{
            width: 40px;
            float: left;
            border-radius: 50%;
        }
        .content{
            width: 140px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            float: right;
            h5{
                margin-bottom: 5px;
            }
            span{
                color: rgb(133, 154, 171);
                font-size: 13px;
                margin-bottom: 10px;
            } 
        }
    }
}
        /* 中间内容样式 */
        .container-middle{
            width: 500px;
            height: 493px;
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;
            > img{
                width: 92px;
                height: 128px;
                position: absolute;
                top: -10px;
                left: 50%;
                transform: rotate(-30deg);
                transform-origin: 11px 11px;
                z-index: 2;
                transition: all 1s;
            }
            .img-animation{
                transform: rotate(0deg);
            }
            .cd{
                width: 254px;
                height: 254px;
                position: relative;
                border-radius: 50%;
                overflow: hidden;
               
                transition: all 0.3s;
                >img{
                    width: 254px;
                    position: absolute;
                    top: 0;
                    left: 0;
                }
            }
            .cd-animation{
                animation: cdmove 5s linear 0s infinite;
            }
            .paused{
                animation-play-state: paused;
            }

            .title{
                width: 150px;
                height: 40px;
                background: rgb(233, 214, 194);
                
                line-height: 40px;
                text-align: center;
                
            }
        }
    }
    /* 播放器状态栏 */
    .player-status{
        width: 900px;
        height: 54px;
        background: rgb(241, 243, 244);
        border-radius:  0 0 6px 6px;
        audio{
            width: 100%;
        }
    }
}


/* 视频 */
.video{
    // width: 900px;
    position: relative;
    z-index: 10;
    display: none;
    video{
        width: 900px;
    }
    img{
        position: absolute;
        right: 0;
        top: 0;
        z-index: 12;
    }
}
@keyframes cdmove{
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}